
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.0.0/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div class="chat-recod" id="app">
<input type="text" value="{$row['id']}" ref="id" style="display: none;">
        <div style="background: #e4e4e4; " v-if="list.length">
            <div class="'myself'" v-for="item in list" :key="item.id" style="overflow: hidden;margin:5px 5px">
        
        <div class="left" v-if="item.type==1">
            <h3 style="text-align: left;font-size: 12px;">
                <span>卖家</span>
                <em style="color: #aaa;font-family: arial;">{{changeFormatDate(item.msgTimestamp)}}</em>
            </h3>
            <p style="background: #fff;font-size: 14px;color: #000;word-break: break-all;line-height: 20px;padding: 10px 15px;font-family: microsoft yahei;max-width: 80%;display: inline-block;border-radius: 2px;float: leftleft;" v-if="item.content.indexOf('https')==-1">
                {{item.content}}
            </p >
            <ul class="row list-inline faupload-preview" v-else>
                <el-image 
                    style="height: 100px"
                    :src="item.content" 
                    :preview-src-list="Array(item.content)">
                </el-image>
            </ul>
        </div>
        <div class="right" v-else>
            <h3 style="text-align: right;font-size: 12px;">
                <em style="color: #aaa;font-family: arial;">{{changeFormatDate(item.msgTimestamp)}}</em>
                <span>买家</span>
            </h3>
            <p style="background: #fff;font-size: 14px;color: #000;word-break: break-all;line-height: 20px;padding: 10px 15px;font-family: microsoft yahei;max-width: 80%;display: inline-block;border-radius: 2px;float: right;" v-if="item.content.indexOf('https')==-1">
                {{item.content}}
            </p >
            <ul class="row list-inline faupload-preview" v-else>
                <el-image 
                    style="height: 100px;float: right;"
                    :src="item.content" 
                    :preview-src-list="Array(item.content)">
                </el-image>
            </ul>
        </div>
    </div>
    </div>
    <div v-else>
        暂无聊天记录   
    </div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            list:[],
        },
        mounted(){
            this.getChangegoods({id:this.$refs.id.value})
        },
        methods:{
            //时间戳转时间
            changeFormatDate(time) {
                return this.formatDate(time, 'yyyy-MM-dd hh:mm:ss')
            },
            formatDate(time, fmt) {
                time = time * 1000
                let date = new Date(time)
                if (/(y+)/.test(fmt)) {
                  fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
                }
                let o = {
                  'M+': date.getMonth() + 1,
                  'd+': date.getDate(),
                  'h+': date.getHours(),
                  'm+': date.getMinutes(),
                  's+': date.getSeconds()
                }
                for (let k in o) {
                  if (new RegExp(`(${k})`).test(fmt)) {
                    let str = o[k] + ''
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str))
                  }
                }
                return fmt
            },
               
            padLeftZero(str) {
                return ('00' + str).substr(str.length)
            },
            huanjing(){
                return window.location.href.indexOf('ceshi')!=-1||window.location.href.indexOf('8080')!=-1
            },
            request(url,data){
                console.log(data)
                const instance =axios.create({
                    timeout:5000,
                    baseURL:this.huanjing()?'https://ceshi.780g.com/BfcTyWlLqd.php':'https://www.780g.com/BfcTyWlLqd.php'//测试
                    // baseURL:'https://ceshi.780g.com/BfcTyWlLqd.php'//测试
                    //  baseURL:'https://www.780g.com'//正式
                })
                
                return instance.post(url,data)
            },
            async getChangegoods(id){
                const result = await this.request('order/order/chatlist',id)
                console.log(this.list=result.data)
            }
        }
    })
</script>       